@charset "utf-8";

#body {
  height: 100%;
  background-color: #f2f2f2;
}
#header {
  width: 100%;
  height: 0.48rem;
  background-color: #fff;
  display: flex;
  line-height: 0.48rem;
  justify-content: space-around;
}
#header .back i {
  font-size: 23px;
  color: #919191;
}

#header .title {
  font-size: 16px;
  width: 2rem;
  text-align: center;
  color: #272c32;
}
#header .back i {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background-size: 100% auto;
  font-size: 23px;
  padding-left: 4px;
}
#totalProduct {
  width: 90%;
  margin: auto;
  margin-top: 0.1rem;
  border-radius: 10px;
  height: auto;
  background-color: #fff;
  padding: 0.05rem;
}
#totalProduct .title {
  line-height: 0.42rem;
  border-bottom: 1px solid #f7f7f7;
  display: flex;
  justify-content: space-between;
}
#totalProduct .title .totalOrder {
  font-size: 0.16rem;
  font-weight: 700;
}
#totalProduct .title .showAllOrders {
  font-size: 0.12rem;
  color: #95938e;
}
#totalProduct .sorts {
  background-color: #fff;
  height: 0.73rem;
  display: flex;
  justify-content: space-around;
}

#totalProduct .sorts p img,
#totalProduct .myServe p img {
  display: block;
  width: 0.46rem;
  height: 0.46rem;
  padding-top: 0.05rem;
  padding-left: 0.06rem;
}
#totalProduct .sorts p span,
#totalProduct .myServe p span {
  position: relative;
  right: -6px;
  font-size: 13px;
}
.myMoney {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  display: flex;
  justify-content: start;
}
.myMoney .conetnt img {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  margin-right: 10px;
}
.myMoney .conetnt {
  width: 45%;
  display: flex;
  justify-content: start;
  padding-left: 5%;
}
.myMoney .conetnt p span {
  font-size: 20px;
  padding-right: 0.05rem;
  font-weight: 700;
  color: #000;
}
.myMoney .conetnt p {
  font-size: 14px;
}
.myMoney .conetnt span {
  font-size: 12px;
  color: #9ea0a1;
}
.myServe {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
#totalProduct .myServe p {
  width: 25%;
  position: relative;
  right: -0.1rem;
  padding: 0.15rem 0;
}
#totalProduct .myServe p img {
  width: 30px;
  height: 30px;
  position: relative;
  left: 0.1rem;
  padding: 0.03rem;
}
#link {
  margin-top: 0.1rem;
  background-color: #f8f8f8;
}
.top {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 0.33rem;
}
.top span {
  font-size: 14px;
  color: #242833;
  padding: 0 0.16rem;
}
.top span::after,
.bottom span::after {
  content: "";
  display: inline-block;
  height: 12px;
  width: 1px;
  background-color: #6f6f6e;
  position: relative;
  left: 0.16rem;
}
.top span:nth-of-type(3)::after,
.bottom span:nth-of-type(4)::after {
  display: none;
}
h1 {
  font-size: 13px;
  color: #7a7b7c;
  width: 70%;
  margin: auto;
  text-align: center;
  line-height: 0.36rem;
}
.bottom {
  width: 100%;
  margin: auto;
  color: #6f6f6e;
  font-size: 12px;
  text-align: center;
  padding-bottom: 0.73rem;
}
.bottom span {
  padding: 0 0.07rem;
}
.bottom span::after {
  left: 0.05rem;
  top: 0.02rem;
}

#nav {
  height: 0.44rem;
  width: 100%;
  background: #f8f8f8;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  box-shadow: 0px -3px 8px #d3d2d2;
  z-index: 99;
  padding-top: 0.05rem;
}
#nav p {
  width: 18%;
  text-align: center;
}
#nav p img {
  width: 24px;
  height: 24px;
  /* display: block; */
  text-align: center;
}
#nav p span {
  display: block;
  font-size: 12px;
  color: #626268;
}
#nav .active span {
  color: #e7a16d;
}
